<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件传值</title>
</head>

<body>
    <div id="app">
        <div>123</div>
        <test @get-data="pData"></test>
    </div>

    <template id="test">
        <div>
            <li v-for="item in data">
                {{item}}
                <button @click="sendData(item)">给父组件发送{{item.name}}</button>

            </li>
        </div>
    </template>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const test = {
            template: "#test",
            data() {
                return {
                    data: [{
                        id: 1,
                        name: "数据一"
                    }, {
                        id: 2,
                        name: "数据二"
                    }, {
                        id: 3,
                        name: "数据三"
                    }, {
                        id: 4,
                        name: "数据四"
                    }]
                }
            },
            methods: {
                sendData(item) {
                    this.$emit("get-data", item, "123"); /* 添加到父组件自定义事件get-data事件 */
                }
            }
        }

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            components: {
                test //ES6语法中，如果键值名字相同可以省略不写
            },
            methods: {
                pData(item, data) {
                    console.log("getData", item, data);

                }
            }
        })
    </script>
</body>

</html>